<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body id="body">

<div id="container" tabindex="-1">
    <article><div>article element</div></article>
    <section><div>section element</div></section>
    <header><div>header element</div></header>
    <aside><div>aside element</div></aside>
    <address><div>address element</div></address>
    <footer><div>footer element</div></footer>
    <main><div>main element</div></main>
    <nav><div>nav element</div></nav>
</div>

<p id="description"></p>
<div id="console"></div>

<script>
if (window.testRunner && window.accessibilityController) {
    testRunner.dumpAsText();

    description("This tests that landmark and related roles are not ignored.");

    var roles = [
        "AXArticle",
        "AXSection",
        "AXHeader",
        "AXComplementary",
        "AXGenericContainer",
        "AXFooter",
        "AXMain",
        "AXNavigation"
    ];

    var container = document.getElementById("container");
    container.focus();
    var containerNode = accessibilityController.focusedElement;

    shouldBe("containerNode.childrenCount", "" + roles.length);

    for (var i = 0; i < roles.length; i++) {
        var AXObject = containerNode.childAtIndex(i);
        shouldBe("AXObject.role", "'AXRole: " + roles[i] + "'");
    }
}
</script>
</body>
</html>
